$--color-primary: #2c68f6 !default;
$--color-success: #67c23a !default;
$--color-warning: #ff9900 !default;
$--color-danger: #ff0033 !default;
$--color-info: #0099cc !default;
/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";
@import "~element-ui/packages/theme-chalk/src/index";

//! element的各组件样式修改
/* 按钮样式 */
.el-button--small {
  padding: 5px 16px;
  font-size: 12px;
  font-weight: 400;
}

.el-input.is-disabled .el-input__inner {
  background: #1b1b1b;
}

.el-button--normal {
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 400;
}

.el-button--default {
  background: #3e4046;
  color: #fff;
  border: none;

  &:hover {
    background: #5e616a;
    color: #fff;
  }

  &:focus {
    background: #5e616a;
    color: #fff;
  }

  &:active {
    background: #3e4046;
    color: #fff;
  }
}

.el-button--primary.is-disabled {
  background-color: rgb(152, 152, 152);
  border: none;

  &:hover {
    background-color: rgb(152, 152, 152);
  }
}

/* loading 样式 */
.el-loading-mask {
  background: rgba($color: #5e616a, $alpha: 0.7);
}

/* 信息提示样式 */
.el-message {
  background-color: #fff !important;
  min-width: 200px !important;
  padding: 10px 20px !important;
  border: none !important;
  box-shadow: $--xy-shadow-deep;

  .el-message__content {
    color: #666 !important;
  }
}

/* 弹出框样式 */

.el-popover {
  min-width: inherit;
  padding: 5px 10px;
  color: #fff;
  font-size: 13px;
  background-color: #090a0b;
  border: none;
  opacity: 0.9;
}

.rightPopver .popper__arrow {
  border-right-color: #090a0b !important;
}

.rightPopver .popper__arrow::after {
  border-right-color: #090a0b !important;
}

.bottomPopver .popper__arrow {
  border-bottom-color: #090a0b !important;
}

.bottomPopver .popper__arrow::after {
  border-bottom-color: #090a0b !important;
}

.topPopver .popper__arrow {
  border-top-color: #090a0b !important;
}

.topPopver .popper__arrow::after {
  border-top-color: #090a0b !important;
}

.leftPopver .popper__arrow {
  border-left-color: #090a0b !important;
}

.leftPopver .popper__arrow::after {
  border-left-color: #090a0b !important;
}

.leftPopver {
  padding: 0 !important;
}

.rightPopver {
  margin-left: 28px !important;
}

.bottomPopver {
  padding: 0;
  margin-top: 18px !important;
}

.topPopver {
  margin-bottom: 15px !important;
}

/* 开关样式 */

.el-switch__label {
  span {
    color: #9e9e9e;
    font-size: 13px;
  }
}

.el-switch__core {
  width: 32px !important;
  height: 16px !important;
  background-color: rgba($color: #686868, $alpha: 0.8);
  border: 1px solid rgb(111, 111, 111);

  &::after {
    height: 12px;
    width: 12px;
  }
}

.el-switch.is-checked .el-switch__core::after {
  margin-left: -13px;
}

.el-input__inner {
  background-color: #1b1b1b;
  border: 1px solid transparent !important;
  color: #ccc;

  &:focus {
    border: 1px solid #5b5a5e !important;
  }
}

/* 弹窗样式 */
.el-dialog {
  background-color: #1f1f1f;
}

.el-dialog__body {
  padding: 25px;
}

.el-dialog__headerbtn {
  top: 15px;
}

.el-dialog__header {
  padding: 10px 15px;
}

.el-dialog__title {
  color: #fff;
  font-size: 13px;
}

/* 头像上传样式 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 125px;
  height: 125px;
  line-height: 125px;
  text-align: center;
}

.avatar {
  width: 125px;
  height: 125px;
  display: block;
}

/* form 样式 */
.el-form-item__label {
  color: #eee;
}

/* 下拉样式 */
.el-select-dropdown {
  border: none;
  background-color: #0d0f12;
}

.el-select-dropdown__empty {
  background-color: #0d0f12;
}

.el-select-dropdown .popper__arrow {
  border-bottom-color: #090a0b !important;
}

.el-select-dropdown .popper__arrow::after {
  border-bottom-color: #090a0b !important;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #181b1d;
  color: #ffffff;
}

/* 分页样式 */
.el-pagination {
  background-color: transparent;
  padding: 0;

  button {
    background-color: transparent !important;
    color: #ccc !important;
  }

  .el-pager {
    li {
      color: #fff !important;
      background-color: transparent !important;
      margin: 0 !important;
    }

    li.active {
      background-color: #2c68f6 !important;
    }
  }
}

.el-pagination.is-background .el-pager li:not(.active):hover {
  color: #b9b9b9 !important;
}

/* 滑块 */
.el-tooltip__popper {
  background-color: #090a0b !important;
}

.el-tooltip__popper .popper__arrow {
  border-top-color: #090a0b !important;
}

.el-tooltip__popper .popper__arrow::after {
  border-top-color: #090a0b !important;
}

.el-slider__button {
  background-color: #010101;
}

.el-slider__stop {
  background-color: rgb(220, 220, 220);
  border: 1px solid #fff;
}

.el-slider__runway {
  opacity: 0.6;
  background-color: #888888;
}

.el-slider__marks-text {
  font-size: 12px;
  color: #ccc;
}

.el-slider__marks-text {
  white-space: nowrap;
}
